<template>
  <div>
    <!-- inline:代表的是行内表单，代表一行可以放置多个表单元素 -->
     <!-- :model表单收集数据 -->
      <el-form :inline="true" class="demo-form-inline" style="padding-top: 15px;" :model="cForm">
        <el-form-item label="一级分类">
          <!-- @change：elementui 提供的自定义事件 下拉框选项发生变化时触发 -->
          <!-- select标签中v-model收集的数据是由option标签的value属性提供的 -->
            <el-select  placeholder="请选择" v-model="cForm.category1Id" @change="handler1" :disabled="show">
                <el-option :label="A1.name" :value="A1.id" v-for="A1 in list1" :key="A1.id"></el-option>
            </el-select>
        </el-form-item>
       
        <el-form-item label="二级分类">
           <el-select  placeholder="请选择" v-model="cForm.category2Id" @change="handler2" :disabled="show">
                <el-option :label="A2.name" :value="A2.id" v-for="A2 in list2" :key="A2.id"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="三级分类">
          <el-select  placeholder="请选择" v-model="cForm.category3Id" @change="handler3" :disabled="show">
                <el-option :label="A3.name" :value="A3.id" v-for="A3 in list3" :key="A3.id"></el-option>
            </el-select>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
export default {
  name: "CategorySelect",
  props:['show'],
  data() {
    return {
      list1:[],//一级分类数据
      list2:[],//二级分类数据
      list3:[],//三级分类数据
      // 收集一二三级分类的ID 带给服务器的参数
      cForm:{
        category1Id:"",
        category2Id:"",
        category3Id:"",
      },
    }
  },
  mounted(){
    this.getCategory1()
  },
  methods:{
    //获取一级分类
    async getCategory1(){
      const result=await this.$API.attr.reqGetCategory1();
      try {
        if(result.code==200){
        this.list1=result.data
      }
      } catch (error) {
        console.log(error.message);
      }
     
    },
    //一级分类的select事件回调（当一级分类的option发生变化的时候获取相应二级分类的数据）
    async handler1(){
      // 清空数据
      this.list2=[]
      this.list3=[]
      this.cForm.category2Id=''
      this.cForm.category3Id=''
      const {category1Id}=this.cForm
      const result=await this.$API.attr.reqGetCategory2(category1Id);
      try {
        if(result.code==200){
        this.list2=result.data
      }
      } catch (error) {
        console.log(error.message);
      }
      
    },
    //二级分类的select事件回调（当二级分类的option发生变化的时候获取相应三级分类的数据）
    async handler2(){
        // 清空数据
      this.list3=[]
      this.cForm.category3Id=''
        const {category2Id} = this.cForm;
        try {
          const result=await this.$API.attr.reqGetCategory3(category2Id);
          if(result.code==200){
            this.list3=result.data
          }
        } catch (error) {
          console.log(error.message);
        }
    },
    handler3(){
      const {category1Id,category2Id,category3Id}= this.cForm
      if(category3Id){
        // 触发父组件中的自定义事件，将一二三级ID传递过去
        this.$emit('getCategoryId',{category1Id,category2Id,category3Id})
      }
    }
  }
};
</script>

<style>
.el-card__body{
  padding: 15px !important;
}
</style>